<!DOCTYPE html>
<html>
	<!-- 
			Vue监视数据的原理
					1. vue会监视data中所有层次对象的属性
					2. 对象中的属性数据通过添加set方法来来实现监视
					3. 数组中也实现了监视: 重写数组一系列更新元素的方法，做了两件事：
								1).调用原生对应的方法对数组进行处理
								2).去更新界面
					4.在Vue修改数组中的某个元素，一定要用如下api，不可以直接arr[索引值]去操作
							push()
							pop()
							shift()
							unshift()
							splice()
							sort()
							reverse()
		-->
	<head>
		<meta charset="UTF-8" />
		<title>更新列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>人员列表</h1>
			<input v-model="keyWord" type="text" placeholder="输入姓名进行匹配"><br/><br/>
			<button @click="sortType = 1">年龄升序↓</button>
			<button @click="sortType = 2">年龄降序↓</button>
			<button @click="sortType = 0">原顺序</button>
			<button @click="updateMei">点我更新马冬梅的信息</button>
			<ul>
				<li :key="item.id" v-for="(item,index) in fmtPersons">
					{{item.name}}--{{item.age}}--{{item.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, // 0原顺序  1升序  2降序
					persons:[
						{id:'001',name:'马冬梅',sex:'女',age:19,a:[{b:[{c:[{d:99}]}]}]},
						{id:'002',name:'周冬雨',sex:'女',age:18},
						{id:'003',name:'周杰伦',sex:'男',age:21},
						{id:'004',name:'温兆伦',sex:'男',age:20}
					],
				},
				//computed实现
				computed:{
					fmtPersons(){
						const {keyWord,sortType} = this
						//arr是过滤完的数组
						const arr = this.persons.filter((personObj)=>{
							return personObj.name.indexOf(keyWord) !== -1
						})
						//根据sortType的值，决定：如何排序
						if(sortType){ //能进入判断意味着：需要排序
							arr.sort((a,b)=>{
								if(sortType === 1) return a.age - b.age
								else return b.age - a.age
							})
						}
						return arr
					}
				},
				methods:{
					updateMei(){
						// this.persons[0].age = 20 //更新马冬梅的年龄--奏效
						// this.persons[0].name = '马东没' //更新马冬梅的名字--奏效
						// this.persons[0].sex = '未知' //更新马冬梅的性别--奏效
						// this.persons[0] = {id:'001',name:'马东没',age:20,sex:'未知'} //不奏效 -- 没有使用可以修改原数组的方法，例如：pop shift push 等等，所以Vue监测不到。
						// this.persons.splice(0,1,{id:'001',name:'马东没',age:20,sex:'未知'}) //不奏效
						// console.log(this.persons[0])
						console.log(this)
					}
				}
			})

		</script>
	</body>
</html>